<template>
    <div>
        <filterComponent v-model:filter-data="filterData" :min-width='400' hideHead @doSearch="handleSearch" />
    </div>
    <el-card class="reset">
        <tableComponent class="set-height" theme="light" :table-header="tableHeader" :table-data="tableData"
            v-model:page-info="pageInfo" @pageChange="handlePageChange" @sort-change="sortMethod">
            <template #amount>
                <el-table-column label="操作金额">
                    <template #default="scope">
                        <span class="orange">{{ scope.row.amount }}</span>
                    </template>
                </el-table-column>
            </template>
            <template #auditStatus>
                <el-table-column label="状态">
                    <template #default="scope">
                        <span :class="{ [`active-${scope.row.auditStatus}`]: true }">{{ statusName(scope.row.auditStatus)
                        }}</span>
                    </template>
                </el-table-column>
            </template>
            <template #voucherUrl>
                <el-table-column label="充值凭证">
                    <template #default="scope">
                        <bigPicture v-if="scope.row.voucherUrl" text="点击查看" :imageUrl="scope.row.voucherUrl" />
                        <span v-else>--</span>
                    </template>
                </el-table-column>
            </template>
        </tableComponent>
    </el-card>
</template>
<script setup>
import { ref, computed, watch, onMounted } from 'vue'
import filterComponent from '@/components/filterComponent/index.vue'
import tableComponent from '@/components/tableComponent/index.vue'
import { getBalanceRecord } from '@/api/clients/signClient.ts'

const props = defineProps({
    companyId: {
        type: [Number, String]
    },
    insureType: {
        type: String,
        default: 'day'
    }
})

// const axios = {
//     day: {
//         getData: getBalanceRecordDay
//     },
//     long: {
//         getData: getBalanceRecord
//     },
//     group: {
//         getData: getBalanceRecordGroup
//     }
// }

const filterData = ref({
    list: {
        operationType: {
            name: '账户类型',
            prop: 'operationType',
            value: [],
            placeholder: '',
            type: 'checkgroup',
            options: [
                {
                    label: '充值',
                    value: 1
                },
                {
                    label: '提现',
                    value: 3
                },
                {
                    label: '余额转入',
                    value: 5
                },
                {
                    label: '余额转出',
                    value: 4
                },
            ],
            defaultAttrs: {
                label: 'label',
                value: 'value'
            },
            handleFocus: (item) => {

            },
            handleChange: (item) => {

            }
        },
    },
    buttonList: [
    ]
})

const pageInfo = ref({
    pageNum: 1,
    pageSize: 10,
    total: 0
})

const tableHeader = ref([
    {
        label: '类型',
        prop: 'status',
    },
    {
        label: '操作金额',
        prop: 'rechargeAmount',
    },
    {
        label: '操作时间',
        prop: 'payDate',
    },
    {
        label: '操作方式',
        prop: 'operatorType',
    },
    {
        label: '状态',
        prop: 'auditStatus',
    },
    {
        label: '备注',
        prop: 'remark',
    },
    {
        label: '充值凭证',
        prop: 'voucherUrl',
    },
    {
        label: '收款账户',
        prop: 'bankName'
    }
])

const tableData = ref([])

const statusName = computed(() => {
    return (status) => {
        const map = {
            0: '未审核',
            1: '已审核',
            2: '已驳回',
            3: '已提现',
            4: '已转出',
            5: '已转入'
        }
        return map[status]
    }
})

const createQuery = () => {
    const query = {}
    for (const key in filterData.value.list) {
        if (Array.isArray(filterData.value.list[key].value)) {
            query[filterData.value.list[key].prop] = filterData.value.list[key].value.join(',')
        } else {
            query[filterData.value.list[key].prop] = filterData.value.list[key].value
        }
    }
    return query
}

const getData = () => {
    const query = {
        ...createQuery(),
        companyId: props.companyId,
        type: 1,
        pageSize: pageInfo.value.pageSize,
        pageNum: pageInfo.value.pageNum
    }
    if (props.insureType === 'day') {
        query.type = 0
    } else if (props.insureType === 'group') {
        query.type = 2
    }
    getBalanceRecord(query).then(res => {
        tableData.value = res.wesureAccountBalanceRecordList.list
        pageInfo.value.total = res.wesureAccountBalanceRecordList.totalCount
    })
}

const sortMethod = (column) => {
    console.log(123, column)
}

const handleSearch = () => {
    getData()
}

const handlePageChange = () => {
    getData()
}

const toDetail = () => {
    console.log(2222)
}

watch(() => props.companyId, (newval) => {
    if (newval) {
        getData()
    }
})
</script>
<style lang="scss" scoped>
.reset {
    margin-top: -16px;
}

.set-height {
    // height: calc(100vh - 425px);
}

.orange {
    color: #FF7642;
}

$colors: (
    0: #9497B1,
    1: #202536,
    4: #3DB86D,
    2: #E05F42,
    5: #FFA814,
    3: #3E5FF5
);

@each $index,
$color in $colors {
    .active-#{$index} {
        color: $color;
    }
}
</style>